<template>
  <!-- 门票详情自营商品弹出框 -->
  <view v-show="hideModal" class="container">
    <view class="mask" catchtouchmove="ture" @touchmove.stop.prevent @click.stop="close()" />
    <view
      :class="devtools==='ios' ?'content-ios bottom-pos':'content bottom-pos'"
      :animation="animationData"
      @touchmove.stop.prevent
    >
      <view class="self-ticket" :style="'right:' + right + 'rpx'">
        <!-- 选择套餐 -->
        <view class="choice-set-meal">
          <!-- 头部，关闭部分 -->
          <view class="choice-set-meal-head">
            <text>选择套餐</text>
            <image src="@/static/image/default/contacts/close.png" @click.stop="close()" />
          </view>
          <!-- 主体 -->
          <scroll-view class="choice-set-meal-content" scroll-y>
            <view
              v-for="(item,index) in query"
              :key="index"
              class="choice-set-meal-content-route"
              @click="changingOverDate(item.uid,item.name)"
            >
              <view>{{ item.name }}</view>
              <view>
                {{ '¥'+item.min_price+' ' }}
                <text>起/人</text>
              </view>
            </view>
          </scroll-view>
        </view>
        <!-- 选择日期 -->
        <view class="choice-date">
          <!-- 头部，关闭部分 -->
          <view class="choice-date-head">
            <text>选择日期</text>
            <image src="@/static/image/default/contacts/close.png" @click.stop="close()" />
          </view>
          <!-- 路线文本 -->
          <view class="choice-date-text">
            <text>已选套餐： {{ routeName }}</text>
            <image src="@/static/image/home/close.png" @click="changingOverRoute" />
          </view>
          <!-- 引入日历 -->
          <uniCalendar
            v-if="dateList"
            :my-data="dateList"
            :insert="true"
            :lunar="true"
            :show-month="false"
            :date="datetime"
            @change="change"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { get } from '@utils/storage'
import { getSelfProductPackage } from '@/api/self'
import uniCalendar from '@com/uni-calendar/uni-calendar'
import { showToast, extractionAnimation } from '@utils/myApproach'
export default {
  components: { uniCalendar },
  props: {
    show: {
      type: Boolean,
      required: true
    },
    name: {
      type: String,
      default: null
    },
    productUid: {
      type: String,
      default: null
    },
    query: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      hideModal: false, // 模态框的状态  true-隐藏  false-显示
      animationData: {}, //
      val: 0,
      right: -750,
      dateList: null,
      price: '123',
      datetime: null,
      routeName: null,
      packageUid: null
    }
  },
  computed: {
    devtools() {
      return get('devtools')
    }
  },
  watch: {
    show(val) {
      if (val) {
        this.showModal()
      }
    }
  },
  methods: {
    // 显示遮罩层
    showModal: function() {
      var that = this
      that.hideModal = true
      this.animation = extractionAnimation()
      setTimeout(function() {
        that.fadeIn() // 调用显示动画
      }, 50)
    },
    // 隐藏遮罩层
    close: function() {
      var that = this
      this.animation = extractionAnimation()
      this.right = -750
      this.dateList = null
      this.routeName = null
      this.datetime = null
      that.fadeDown() // 调用隐藏动画
      setTimeout(function() {
        that.hideModal = false
        that.$emit('close', !that.show)
      }, 50) // 先执行下滑动画，再隐藏模块
    },
    // 动画集
    fadeIn: function() {
      this.animation.translateY(0).step()
      this.animationData = this.animation.export() // 动画实例的export方法导出动画数据传递给组件的animation属性
    },
    fadeDown: function() {
      if (this.devtools === 'ios') {
        this.animation.translateY(1036).step()
      } else {
        this.animation.translateY(970).step()
      }
      this.animationData = this.animation.export()
    },
    // 切换到日期
    changingOverDate(uid, name) {
      getSelfProductPackage(uid).then((res) => {
        if (res.data.data.length === 0) {
          showToast('当前套餐暂无可出行日期，请选择其他套餐')
        } else {
          this.packageUid = uid
          this.right = 0
          this.routeName = name
          this.dateList = res.data.data
        }
      })
    },
    // 切换到路线
    changingOverRoute() {
      this.right = -750
      this.dateList = null
      this.routeName = null
      this.datetime = null
    },
    change(date) {
      console.log(date)
      this.datetime = date.fulldate
      uni.navigateTo({
        url: `/pages/order/self?uid=${this.packageUid}&date=${this.datetime}&name=${this.name}&productUid=${this.productUid}`
      })
    }
  }
}
</script>
<style >
.mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
}
.content {
  width: 750rpx;
  height: 970rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  z-index: 1000;
  border-radius: 20rpx 20rpx 0 0;
  overflow: hidden;
}
.content-ios {
  width: 750rpx;
  height: 1036rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  z-index: 1000;
  border-radius: 20rpx 20rpx 0 0;
  overflow: hidden;
}
/*动画前初始位置*/
.bottom-pos {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}
</style>
<style scoped >
.self-ticket {
  display: flex;
  width: 1500rpx;
  position: absolute;
  height: 100%;
  transition: all 0.4s;
}
.choice-date-text {
  display: flex;
  font-size: 28rpx;
  color: #306de9;
}
.choice-date-text > text {
  margin-left: 30rpx;
}
.choice-date-text > image {
  width: 32rpx;
  height: 32rpx;
  margin-left: 16rpx;
  margin-top: 5rpx;
}
</style>
<style scoped>
/* 选择套餐 */
.choice-set-meal {
  width: 750rpx;
  height: 100%;
  overflow: hidden;
}
.choice-set-meal-head {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  margin-bottom: 50rpx;
}
.choice-set-meal-head > text {
  font-size: 32rpx;
  color: #000000;
  font-weight: 400;
  margin-left: 30rpx;
}
.choice-set-meal-head > image {
  width: 32rpx;
  height: 32rpx;
  margin-right: 30rpx;
  margin-top: 6rpx;
}
/* 主体 */
.choice-set-meal-content {
  height: 673rpx;
  overflow: hidden;
}
.choice-set-meal-content-route {
  width: 686rpx;
  height: 76rpx;
  border: 2rpx solid #9b9b9b;
  margin-left: 30rpx;
  text-align: left;
  line-height: 76rpx;
  font-size: 28rpx;
  font-weight: 400;
  text-indent: 2em;
  margin-bottom: 30rpx;
  display: flex;
  justify-content: space-between;
}
.choice-set-meal-content-route > view:nth-child(2) {
  margin-right: 20rpx;
  color: #dd3939;
  font-weight: 32rpx;
  font-size: 32rpx;
}
.choice-set-meal-content-route > view:nth-child(2) > text {
  font-size: 20rpx;
  font-weight: 400;
  color: #4a4a4a;
}
</style>
<style scoped>
/* 选择日期*/
.choice-date {
  width: 750rpx;
  height: 100%;
  overflow: hidden;
}
.choice-date-head {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  margin-bottom: 50rpx;
}
.choice-date-head > text {
  font-size: 32rpx;
  color: #000000;
  font-weight: 400;
  margin-left: 30rpx;
}
.choice-date-head > image {
  width: 32rpx;
  height: 32rpx;
  margin-right: 30rpx;
  margin-top: 6rpx;
}
</style>
